<template>
	<view class="bg-cF6F7FB">
		<catalogue></catalogue>
		<view class="bg">
			<image class="w-100 h-100" :src="`${cosUrl}/bg/banner_custom_ui.png`" mode=""></image>
		</view>
		<bread :textArr="['首页','定制开发','网站/小程序UI设计']"></bread>
		<view class="" style="padding-top: 96rpx;">
			<view class="title-zh d-flex justify-content-center">
				<view class="">对网站/小程序UI设计有</view>
				<text>深入的思考</text>
			</view>
			<view class="title-en text-center">
				DEEP IDEA
			</view>
			<view class="line" style="margin-left: 24rpx;">
			</view>
			<view class="content">
				<view class="pt-1">亚克茜一直认为“只有优秀的应用UI设计才能给用户植入产品记忆点”，眼睛是人们接受外界事物最快的一个器官，视觉上的冲击对于一个人来讲是非常重要的，第一印象做得好， 后期可能会省掉很多的问题，让一个用户更加的信任APP</view>	
				<view class="py-3">
					如果在设计上面融入了情感化设计，那么这种情感化的设计更容易带给客户温度
				</view>
				<view class="pb-1">
					努力建设好一个软件的界面设计是一件物超所值，提高用户转化率最有效工作
				</view>
			</view>
			<view class="title-zh d-flex justify-content-center ">
				<text>关于</text>
				<view class="">UI界面设计</view>
			</view>
			<view class="title-en text-center pb-24">
				ABOUT UI DESIGN
			</view>
			<view class="w-100 px-12">
				<view class="bg-cfff px-12  brs-8">
					<view :class="i?'py-1':'pt-3 pb-1'" v-for="v,i in blogs" :key="i">
						<view class="position-relative " style="height: 400rpx;background-size: contain;"
							:style="{'background-image': `url(${v.coverimage})`}" @tap="jumpBlogDetail(v)">
							<image v-if="v.blogtype=='视频'" class="puase position-absolute"
								src="../../static/website/play.svg" mode=""></image>
							<view class="position-absolute  w-100 text-cfff" style="bottom: 0px;">
								<view style="background: rgba(54, 54, 54, 0.85);">
									<view style="margin:0 60rpx;">
										<view class="d-flex num  justify-content-between  text-center">
											<view class="d-flex align-items-center  ">
												<image src="../../static/website/view.svg" mode=""></image>
												<text class="case_num">{{v.viewcount}}</text>
											</view>
											<view class="d-flex align-items-center  " @click.stop="toggleLikeblog_throttle(v)">
												<image :src="vuex_likeblog.includes(v.id) ? '../../static/website/collect.svg' : '../../static/website/collect-no.svg'" mode=""></image>
												<text class="case_num">{{v.likecount}}</text>
											</view>
											<view class="d-flex align-items-center  " @click.stop="toggleSaveblog_throttle(v)">
												<image :src="vuex_saveblog.includes(v.id) ? '../../static/website/star-fill.svg' : '../../static/website/star.svg'" mode=""></image>
												<text class="case_num">{{v.savecount}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="video-text">
							{{v.name}}
						</view>
					</view>
					<view class="text-center pb-3">
						<img src="../../static/website/down_arrow.svg" class="img-16px" alt="">
						<view class="text-theme text-40rpx pt-2" @click="jumpGO('website/share')">更多UI界面设计分享</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding-top: 96rpx;">
			<view class="title-zh d-flex justify-content-center">
				<text>UI界面</text>
				<view class="">设计案例</view>
			</view>
			<view class="title-en text-center pb-4">
				UI DESIGN CASE
			</view>
			<view class="list" v-for="v,i in cases" :key="i" @tap="jumpGO('website/casePresentationDetail?id='+v.id)">
				<view class="bg-white brs-8">
					<image :src="v.coverimage" mode="" style="height: 512rpx;"></image>
					<view class="title">{{v.name}}</view>
					<view class="type d-flex">
						<view class="">
							类型-{{v.softtype}}
						</view>
						<view class="">
							行业-{{v.industrytype}}
						</view>
					</view>
					<view class="d-flex nums justify-content-between  pb-2">
						<view class="d-flex align-items-center">
							<image src="../../static/website/view.svg" mode=""></image>
							<text class="case_num_1">{{v.viewcount}}</text>
						</view>
						<view class="d-flex align-items-center" @click.stop="toggleLikeexample_throttle(v)">
							<image :src="vuex_likeexample.includes(v.id) ? '../../static/website/collect.svg' : '../../static/website/collect-no.svg'" mode=""></image>
							<text class="case_num_1">{{v.likecount}}</text>
						</view>
						<view class="d-flex align-items-center" @click.stop="toggleSaveexample_throttle(v)">
							<image :src="vuex_saveexample.includes(v.id) ? '../../static/website/star-fill.svg' : '../../static/website/star.svg'" mode=""></image>
							<text class="case_num_1">{{v.savecount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 24rpx;">
				<view class="more">
					<view class="d-flex title justify-content-center align-items-center"
						@tap="jumpGO('website/casePresentation')">
						<image src="../../static/website/more.svg" mode=""></image>
						<view class="text">更多案例</view>
					</view>
					<view class="row row-cols-3 mx-0">
						<view class=" px-1 kind" v-for="v,i in anliList" :key="i" @click="gotoExamplelistPage(v)">
							{{v.name}}({{v.count}})
						</view>
						<view class=" px-1 kind" @click="jumpGO('website/casePresentation')">
							更多行业…
						</view>
					</view>
				</view>
			</view>
			<view style="padding-top: 96rpx;">
				<Footer title="只有优秀的应用UI设计才能给用户植入产品" celebrity="亚克茜"></Footer>
			</view>
			<view class="gotop" @click="goTop" v-show="scrollNum>300">
				<image src="../../static/website/back.png" style="width: 56px;height: 56px;" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http_uidesignpage,
	} from '@/common/api.js';
	export default {
		data() {
			return {
				blogs: [],
				cases: [],
				status: false,
				anliList: [],
			}
		},
		onLoad() {
			this.shareTitle = '网站/小程序UI设计'
			this.shareDesc = '亚克茜一直认为“只有优秀的应用UI设计才能给用户植入产品记忆点”，眼睛是人们接受外界事物最快的一个器官，视觉上的冲击对于一个人来讲是非常重要的'
			this.share5v4Image = `${this.cosUrl}/bg/banner_custom_ui.png`
			this.share1v1Image = `${this.cosUrl}/bg/shareimage_uidesign_1v1.png`
			http_uidesignpage()
				.then((res) => {
					console.log(res);
					if (1 == res.code) {
						this.blogs = res.data.blogs
						this.cases = res.data.cases
						this.anliList = res.data.industryTypes

					}
				})
		},
		methods: {
			jumpGO(url) {
				uni.navigateTo({
					url: `/pages/${url}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.case_num {
		font-size: 24rpx;
		color: #F2F2F2;
		padding-left: 8rpx;
	}
	.case_num_1 {
		font-size: 24rpx;
		color: #909193;
		padding-left: 8rpx;
	}
	.bg {
		width: 100%;
		height: 546rpx;
	}

	.title-zh {
		font-size: 40rpx;
		font-weight: 400;
		color: #303133;
		line-height: 56rpx;

		>text {
			color: #40C6A1;
		}
	}

	.title-en {
		font-size: 28rpx;
		font-weight: 300;
		color: #C0C4CC;
		line-height: 40rpx;
	}

	.line {
		width: 180rpx;
		padding-bottom: 48rpx;
		border-bottom: 2rpx solid #40C6A1;
	}

	.content {
		padding: 48rpx 24rpx 96rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #606266;
		line-height: 52rpx;
	}

	.puase {
		width: 144rpx;
		height: 144rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.num {
		padding: 18rpx 0;
		bottom: 0;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.video-text {
		padding-top: 24rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #606266;
		line-height: 50rpx;
	}

	.list {
		.bg-white {
			background: #fff;
		}

		padding: 0 24rpx 32rpx;
		border-radius: 16rpx;

		image {
			width: 100%;
			height: 256px;
			border-radius: 16rpx 16rpx 0px 0px;
		}

		.title {
			font-size: 36rpx;
			color: #303133;
			line-height: 50rpx;
			padding-left: 34rpx;
			padding-top: 24rpx;
		}

		.type {
			font-size: 24rpx;
			font-weight: 300;
			color: #909193;
			line-height: 34rpx;

			>view {
				padding-left: 32rpx;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
			}
		}

		.nums {
			padding: 0 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.more {
		padding: 0 22rpx;
		background: #6FB19F;
		border-radius: 16rpx;

		.title {
			padding: 48rpx 0 32rpx;

			.text {
				font-size: 40rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 56rpx;
				padding-left: 32rpx;
			}
		}

		image {
			width: 52rpx;
			height: 52rpx;
		}

		.kind {
			font-size: 36rpx;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 50rpx;
			padding-bottom: 32rpx;
		}
	}
</style>
